<template>
	<view>
		<u-search
			style="margin: 20rpx 20rpx 10rpx 20rpx;"
			v-model="keyword"
			search-icon-color="#FF6347"
			placeholder="请输入店铺名"
			shape="round"
			@custom="searchClick"
			@search="searchClick"
			@clear="clear"
			:show-action="true"
		></u-search>
		<!-- 商家门店 -->
		<view class="store-box" v-if="currentModeIndex === 0">
			<!-- 店铺列表 -->
			<view
				class="item-box"
				v-for="(store, i) in storeList"
				:key="i"
				@click="toStore(store.data.store_id, store.data.isstart, store.data.delivery, 1)"
				v-if="store.data.isstart && store.data.isban"
			>
				<view class="top-box">
					<view class="left"><image :src="store.data.avatar" mode="aspectFill"></image></view>
					<view class="right">
						<view style="display: flex;align-items: center;">
							<text class="tit margin-right-sm" style="margin-left: 2rpx;">{{ store.data.name }}</text>
							<view v-if="store.data.type == 0"></view>
							<view v-if="store.data.type == 1" class="mark-tag bg-gradual-orange text-white">人气</view>
							<view v-if="store.data.type == 2" class="mark-tag bg-gradual-orange text-white">上新</view>
							<view v-if="store.data.type == 3" class="mark-tag bg-gradual-orange text-white">促销</view>
							<view v-if="store.data.delivery == 3" class="mark-tag bg-gradual-orange text-white" style="margin-left: 20rpx;">免上楼费</view>
							<!-- <view v-if="store.data.delivery != 3" class="mark-tag bg-grey text-white" style="margin-left: 20rpx;color: #FFFFFF;">配送上楼1.0</view> -->
						</view>

						<view class="row justify-content">
							<view class="row-left" style="display: flex; align-items: center;">
								<i class="hxicon-locationfill" style="margin-top: 2rpx;"></i>
								<text class="margin-left-xs">{{ store.data.address }}</text>
								<!-- <text class="t2">月售{{store.data.monthly_sales}}</text> -->
							</view>
						</view>
						<view class="row">
							<text>起送￥{{ store.data.starting_price }}</text>
							<text class="t2" v-if="store.data.delivery != 3">配送上楼￥1.0</text>
							<text class="t2" v-else>免费配送上楼</text>
						</view>
						<!-- <view class="row">
							<view style="display: flex;">
								<view v-if="store.data.activity" v-for="(item,index) in store.data.activity" class="mark-tag" style="display: flex;border: 3rpx solid #FF5C26;" :key="index">{{item.tag}}</view>
							</view>
						</view> -->
					</view>
				</view>
				<view class="bottom-box" v-if="store.data.goods">
					<view class="bottom-box-container" style="display: flex; flex-direction: column;">
						<scroll-view scroll-x="true">
							<view class="goods-box" v-for="(goods, j) in store.data.goods" :key="j">
								<view class="img-box">
									<image :src="goods.main_pic" mode="aspectFill"></image>
									<!-- <view class="tag">{{ goods.tag }}</view> -->
									<!-- <view class="tag">特价</view> -->
								</view>
								<view class="tit">{{ goods.name }}</view>
								<view class="price-box">
									<text class="txt1">￥</text>
									<text class="txt2">{{ goods.price }}</text>
									<text class="txt3">￥{{ goods.oldprice }}</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
			<!-- 底部加载栏 -->
		<!-- 	<view v-if="storeList" class="bottom-more">
				<view class="text-lg text-white">{{ loadmoreStatus }}</view>
				<view class="margin-top-xs" style="width: 80%;height: 2rpx;background-color: #ffffff;"></view>
				<image class="margin-top-xs" src="/static/me/logo.jpg" mode="aspectFill" style="border-radius: 50%;width: 60rpx;height: 60rpx;"></image>
			</view> -->
		<!-- 消息提醒 -->
		<u-toast ref="uToast" />
		<!-- //加载动画 -->
		<!-- <u-loadmore :status="loadmoreStatus" /> -->
		<!-- <u-loading-icon :show="loadmoreStatus"></u-loading-icon> -->
	</view>
</template>

<script>
//数据库引入
const db = uniCloud.database();
const dbCmd = db.command;
//引入全局变量
let app = getApp();
//引入测试数据
const screenHeight = uni.getSystemInfoSync().screenHeight;
export default {
	data() {
		return {
			keyword: '',
			searchCheck: false,
			page: 0,
			loadmoreStatus: '下拉加载更多', //加载标识
			isdelivery: false,
			storeMorningList: [],
			storedeliveryList: [],
			currentModeIndex: 0,
			specialPrice: [],
			showFoot: 0,
			downOption: {
				auto: false
			},
			rule_show: false,
			head_style: {
				'font-size': '14rpx'
			},
			menuList: [],
			sortIndex: 0,
			storeList: [],
			hos_list: [],
			storenightList: [],
			test: false,
			// 模式选中滑块
			modeSliderStyle: {
				left: 0
			}
		};
	},
	onLoad(options) {
		let that = this;
		that.schoolIndex = options.schoolIndex
	},
	onShow() {
		let that = this;
		//加载商家店铺
		// that.getstoreList();
	},
	watch: {
		currentModeIndex(value) {
			const sliderWidth = uni.upx2px(600 / 2);
			this.modeSliderStyle.left = `${sliderWidth * value}px`;
		}
	},
	// 下拉触底
	onReachBottom() {
		let that = this;
		// if(that.currentModeIndex == 0 && that.storeList.length>0){
		// 	console.log('触底啦！');
		// 	uni.showLoading({
		// 		title: '正在加载店铺'
		// 	})
		// 	//翻页加1
		// 	that.page = that.page  + 1;
		// 	//加载商家店铺
		// 	db.collection('storeList')
		// 		.where({
		// 			'data.isban': true
		// 		})
		// 		.orderBy('data.id')
		// 		.skip(that.page*10)
		// 		.limit(10)
		// 		.get({})
		// 		.then(res => {
		// 			uni.hideLoading();
		// 			console.log('商家店铺列表', res);
		// 			if(res.result.data == 0){
		// 				that.$refs.uToast.show({
		// 					title: '到底啦！',
		// 					type: 'success'
		// 				});
		// 				that.loadmoreStatus = '更多商家敬请期待！'
		// 			}else  if(res.result.data < 10){
		// 				that.storeList = that.storeList.concat(res.result.data);
		// 				that.loadmoreStatus = '更多商家敬请期待！'
		// 			}else{
		// 				that.storeList = that.storeList.concat(res.result.data);
		// 				that.loadmoreStatus = '下拉加载更多！'
		// 			}			
		// 		})
		// 		.catch(err => {
		// 			uni.hideLoading();
		// 			that.$refs.uToast.show({
		// 				title: '网络错误！',
		// 				type: 'error'
		// 			});
		// 		});
		// }else{
		// 	that.loadmoreStatus = '更多商家敬请期待！'
		// }
	},
	methods: {
		//将输入框内容清除
		clear() {
			this.keyword = '';
		},
		//开始搜索
		searchClick(value) {
			let that = this;
			if (value == "") {
				this.$refs.uToast.show({
					title: '搜索不能为空',
					type: 'error'
				});
				return;
			}
			console.log('关键字', value);
			let keyword = value;
			uni.showLoading({
				title: '正在搜索中...'
			})
			//请求后端该订单搜索出来''
			db.collection('storeList')
				.where({
					'data.name': new RegExp(keyword, 'i'),
					'data.school':Number(that.schoolIndex),
					'data.isban': true
				})
				.orderBy('data.id')
				.get({})
				.then((res) => {
					if(res.result.data.length > 0){
						uni.hideLoading();
						that.storeList = res.result.data;
						console.log('人员数据：',that.storeList)
					}else{
						uni.hideLoading();
						that.$refs.uToast.show({
							title: '暂时没有数据',
							type: 'error'
						});
						console.log('暂时没有数据')
						that.storeList = [];
					}
				})
				.catch((err)=>{
					uni.hideLoading();
					that.$refs.uToast.show({
						title: '网络错误',
						type: 'error'
					});
				})
		},
		//加载商家店铺
		getstoreList() {
			//下拉刷新商家
			let that = this;
			console.log('下拉刷新');
			uni.showLoading({
				title: '加载中'
			});
			//加载门店数据
			db.collection('deliverytime')
				.where({
					'data.iskai': true
				})
				.get()
				.then(res => {
					console.log('res次数', res.result.data.length);
					if (res.result.data.length > 0) {
						that.isdelivery = true;
					}
					//加载商家店铺
					db.collection('storeList')
						.where({
							'data.isban': true,
							'data.school':Number(that.schoolIndex)
						})
						.orderBy('data.id')
						.limit(10)
						.get({})
						.then(res => {
							console.log('商家店铺列表', res);
							that.storeList = res.result.data;
						})
						.catch(err => {});
				});
		},
		modeSwitch(index) {
			if (index == 0) {
				this.loadmoreStatus = '下拉加载更多'
			}
			if (index == 1) {
				this.getnightstore();
				this.loadmoreStatus = '更多商家敬请期待！'
			}
			if (index == 4) {
				this.getmorningstore();
				this.loadmoreStatus = '更多商家敬请期待！'
			}
			if (index == 2) {
				this.getdeliverystore();
				this.loadmoreStatus = '更多商家敬请期待！'
			}
			if (index == 5) {
				this.gotodaiban();
				this.loadmoreStatus = '更多商家敬请期待！'
			}
			if (index == 3) {
				this.loadmoreStatus = '更多商家敬请期待！'
				uni.showModal({
					title: '该功能正在研发中...敬请期待'
				});
				return;
			}
			this.currentModeIndex = index;
			this.showPassword = false;
		},
		gotodaiban() {
			let parameter = `?sid=16680806914` + '&delivery=3' + '&sign=5';
			uni.navigateTo({
				url: '/pages/store/index' + parameter
			});
		},
		toStore(id, isstart, delivery, sign) {
			let that = this;
			let parameter = `?sid=${id}` + '&delivery=' + delivery + '&sign=' + sign+"&school="+this.schoolIndex;
			if (!isstart) {
				that.$refs.uToast.show({
					title: '该店铺的营业时间已经关闭！',
					type: 'error'
				});
			} else {
				uni.navigateTo({
					url: '/pages/store/index' + parameter
				});
			}
			// db.collection('givetime').update({
			// 	data: {
			// 		"school": 0
			// 	}
			// }).then(res=>{
			// 	uni.showToast({
			// 		title:"修改好了"
			// 	})
			// })
		},
		//查看超时赔付
		toShowRule() {
			if (this.rule_show) {
				this.rule_show = false;
			} else {
				this.rule_show = true;
			}
		},
		//搜索
		goSearch() {
			uni.navigateTo({
				url: '/pages/search/search?type=home'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// 页面
page {
	// display: flex;
	background: linear-gradient(0deg, #ffa473, #ffe681);
}

.function_box {
	margin-left: 20rpx;
	margin-bottom: 20rpx;
	margin-right: 20rpx;
	padding: 10rpx;
	display: flex;
	justify-content: space-around;
	// border: 2px solid #FFFFFF;
}
.function_item {
	width: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.titile {
		margin-top: 10rpx;
		font-size: 27rpx;
		font-weight: bold;
	}
}

.coupon-tip {
	align-items: center;
	margin-left: 10rpx;
	padding: 3upx 5upx;
	background: #ff5722;
	font-size: 5px;
	color: #fff;
	border-radius: 3px;
	line-height: 1;
	transform: translateY(-4upx);
}

/* 内容布局 start*/
.course-shadow {
	box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
}

.course-radius {
	border-radius: 15rpx;
}

/* 图标容器15 start */
.icon15 {
	&__item {
		width: 30%;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;

		&--icon {
			width: 100rpx;
			height: 100rpx;
			font-size: 60rpx;
			border-radius: 50%;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;

			&::after {
				content: ' ';
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
			}
		}
	}
}

@keyframes suspension {
	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(-0.8rem, 1rem);
	}
}

.login {
	position: relative;
	height: 100%;
	z-index: 1;
	background-color: #ffa473;

	/* 背景图片 start */
	&__bg {
		z-index: -1;
		position: fixed;
		background-color: #ffa473;

		&--top {
			top: 0;
			left: 0;
			right: 0;
			width: 100%;

			.bg {
				width: 750rpx;
				will-change: transform;
			}

			.rocket {
				margin: 50rpx 28%;
				width: 400rpx;
				will-change: transform;
			}
		}

		&--bottom {
			bottom: -10rpx;
			left: 0;
			right: 0;
			width: 100%;
			// height: 144px;
			margin-bottom: env(safe-area-inset-bottom);

			image {
				width: 750rpx;
				will-change: transform;
			}
		}
	}

	/* 背景图片 end */

	/* 内容 start */
	&__wrapper {
		margin-top: 403rpx;
		width: 100%;
		background-color: #ffa473;
	}

	/* 切换 start */
	&__mode {
		position: relative;
		background-color: #ffa473;
		margin: 0 auto;
		width: 600rpx;
		height: 77rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
		border-radius: 39rpx;

		&__item {
			height: 77rpx;
			width: 100%;
			line-height: 77rpx;
			text-align: center;
			font-size: 31rpx;
			color: #908f8f;
			letter-spacing: 0.5em;
			text-indent: 1em;
			z-index: 2;
			transition: all 0.4s;

			&--active {
				font-weight: bold;
				color: #ffffff;
			}
		}

		&__slider {
			position: absolute;
			height: inherit;
			width: calc(600rpx / 2);
			border-radius: inherit;
			box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
			z-index: 1;
			transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}
	}

	/* 切换 end */

	/* 登录方式切换 start */
	&__way {
		margin: 0 auto;
		margin-top: 110rpx;
		background-color: #ffa473;

		&__item {
			&--icon {
				width: 77rpx;
				height: 77rpx;
				font-size: 50rpx;
				border-radius: 100rpx;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: ' ';
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
				}
			}
		}
	}

	/* 登录方式切换 end */
	/* 内容 end */
}

.info_box {
	background-color: #ffa473;
	padding-top: 10rpx;
	padding-left: 10rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.introduction {
	padding-top: 10rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	background-color: #ffa473;
}

//上半部分
.top {
	background: linear-gradient(0deg, #ffa473, #ffe681);
	// background: linear-gradient(0deg, #FF3181, #FF8331);
}

// 轮播图
.bannerimg-box {
	border-bottom-left-radius: 10upx;
	border-bottom-right-radius: 10upx;
	padding: 24rpx;

	swiper {
		height: 303rpx;
		width: 699rpx;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		overflow: hidden;
		width: 100%;
		height: 100%;

		image {
			border-radius: 16rpx;
			width: 100%;
		}
	}
}

// 时间点
.time-set {
	display: flex;
	flex-direction: row;
	margin-top: 20rpx;
	// width: 100%;
	white-space: nowrap;
	height: auto;
	padding: 0 24rpx;

	.time-set-item {
		display: flex;
		flex-direction: row;
		width: 180rpx;
		height: 84rpx;
		margin-right: 20rpx;
		display: inline-block;
		white-space: nowrap;

		// background-color: #00C3FF;
		.itme-top {
			width: 100%;
			height: 36rpx;
			display: flex;
			padding: 0 3rpx;
			background-color: #ff5c26;
			font-size: 20rpx;
			color: #ffffff;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx 8rpx 0 0;
		}

		.itme-blow {
			width: 100%;
			height: 48rpx;
			display: flex;
			background-color: #ffffff;
			font-size: 24rpx;
			font-weight: bold;
			color: #ffce08;
			align-items: center;
			justify-content: center;
			border-radius: 0 0 10rpx 10rpx;
		}
	}
}

//超时赔付
.rule {
	display: flex;
	width: 100%;
	height: auto;
	margin: 10rpx 0rpx 0 0rpx;
	padding: 0 24rpx;
	// align-items: center;
	justify-content: center;
	flex-direction: column;
	// background-color: #FFC107;
}

.goods-nightbox {
	width: 150rpx;
	margin-left: 15rpx;
	display: inline-block;

	.img-box {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		background-color: #f1f1f1;
		border-radius: 8rpx;

		image {
			width: 160rpx;
			height: 160rpx;
		}

		.tag {
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: #ff5722;
			color: #ffffff;
			padding: 4rpx 8rpx;
			font-size: 24rpx;
			border-radius: 2rpx;
		}
	}

	.tit {
		font-size: 22rpx;
		color: #a6a6a6;
		margin-top: 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.price-box {
		margin-top: 8rpx;

		.txt1 {
			font-size: 18rpx;
			color: #ff5722;
		}

		.txt2 {
			font-size: 24rpx;
			color: #ff5722;
		}

		.txt3 {
			margin-left: 12rpx;
			font-size: 18rpx;
			color: #bbbbbb;
			text-decoration: line-through;
		}
	}
}

.goods-box {
	width: 200rpx;
	margin-left: 15rpx;
	display: inline-block;

	.img-box {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		background-color: #f1f1f1;
		border-radius: 8rpx;

		image {
			width: 160rpx;
			height: 160rpx;
		}

		.tag {
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: #ff5722;
			color: #ffffff;
			padding: 4rpx 8rpx;
			font-size: 24rpx;
			border-radius: 2rpx;
		}
	}

	.tit {
		font-size: 22rpx;
		color: #a6a6a6;
		margin-top: 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.price-box {
		margin-top: 8rpx;

		.txt1 {
			font-size: 18rpx;
			color: #ff5722;
		}

		.txt2 {
			font-size: 24rpx;
			color: #ff5722;
		}

		.txt3 {
			margin-left: 12rpx;
			font-size: 18rpx;
			color: #bbbbbb;
			text-decoration: line-through;
		}
	}
}

// 店铺
.store-box {
	padding: 10rpx 0;
	background-color: #ffa473;

	// background-color: #FF3181;
	.sort-box {
		display: flex;
		flex-direction: row;

		// margin-top: 24rpx;
		.item-box {
			margin-right: 32rpx;

			.tit {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #333333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.active {
				font-weight: bold;
			}
		}
	}

	.mark-tag {
		padding: 2rpx 8rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
		white-space: nowrap;
	}

	.item-box {
		margin: 15rpx 30rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;

		.top-box {
			display: flex;
			flex-direction: row;
			padding: 0 20rpx;

			.left {
				margin-right: 20rpx;

				image {
					width: 144rpx;
					height: 144rpx;
					border-radius: 12rpx;
				}
			}

			.right {
				flex: 1;

				.tit {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					white-space: pre-wrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.justify-content {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

				.row {
					font-size: 24rpx;
					color: #999999;
					margin-top: 8rpx;

					.mark-tag {
						width: 110rpx;
						height: 35rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 18rpx;
						color: #ff5c26;
						border-radius: 5rpx;
						white-space: nowrap;
						margin-right: 20rpx;
					}

					.row-left {
						display: flex;
						flex-direction: row;

						.t1,
						i {
							color: #ffca3e;
						}
					}

					.t2 {
						margin-left: 24rpx;
					}

					.row-right {
						display: flex;
						flex-direction: row;

						i {
							margin-right: 8rpx;
						}
					}
				}
			}
		}

		.goods-box:last-child {
			margin-right: 24rpx;
		}

		.bottom-box {
			&-container {
				margin: 12rpx 0 0;
				padding-left: 164rpx;
				white-space: nowrap;

				.goods-box {
					width: 160rpx;
					margin-left: 15rpx;
					display: inline-block;

					.img-box {
						position: relative;
						width: 120rpx;
						height: 100rpx;
						background-color: #f1f1f1;
						border-radius: 8rpx;

						image {
							width: 120rpx;
							height: 100rpx;
						}

						.tag {
							position: absolute;
							bottom: 0;
							left: 0;
							background-color: #ff5722;
							color: #ffffff;
							padding: 4rpx 8rpx;
							font-size: 24rpx;
							border-radius: 8rpx;
						}
					}

					.tit {
						font-size: 22rpx;
						color: #a6a6a6;
						margin-top: 8rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.price-box {
						margin-top: 8rpx;

						.txt1 {
							font-size: 20rpx;
							color: #ff5722;
						}

						.txt2 {
							font-size: 28rpx;
							color: #ff5722;
						}

						.txt3 {
							margin-left: 12rpx;
							font-size: 20rpx;
							color: #bbbbbb;
							text-decoration: line-through;
						}
					}
				}

				.goods-box:last-child {
					margin-right: 24rpx;
				}
			}
		}
	}

	.item-box:last-child {
		border-bottom: 0;
	}
}

// 底部加载
.bottom-more {
	width: 100%;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #ffa473;
}
</style>
